<template>
  <div class="sendMessages mod-config">
    <el-row>
      <el-col :span="24">
        <el-form :inline="true">
          <el-form-item><el-button size="small" type="primary" @click="shaixuan = !shaixuan">筛选</el-button></el-form-item>
          <el-form-item><el-button size="small" type="primary" @click="exportBtn()">导出</el-button></el-form-item>
          <el-form-item><el-button size="small" type="primary" @click="dayin2()">打印</el-button></el-form-item>

          <el-form-item>
            <el-radio-group @change="getDataList()" v-model="dataForm.selDateAdd" size="small">
              <!-- <el-radio-button label="全部"></el-radio-button> -->
              <el-radio-button label="今日"></el-radio-button>
              <el-radio-button label="昨日"></el-radio-button>
              <el-radio-button label="本周"></el-radio-button>
              <el-radio-button label="其他"></el-radio-button>
            </el-radio-group>
          </el-form-item>

          <el-form-item v-if="dataForm.selDateAdd == '其他'">
            <el-date-picker size="small" @change="getDataList()" v-model="dataForm.startDate" value-format="timestamp" type="date" placeholder="开始日期"></el-date-picker>
            <el-date-picker size="small" @change="getDataList()" v-model="dataForm.endDate" value-format="timestamp" type="date" placeholder="结束日期"></el-date-picker>
          </el-form-item>

          <el-form-item style="float: right;" label="" v-if="isAuth('hotel:hotelseller:list')">
            <el-select
              multiple
              collapse-tags
              clearable
              style="width:180px;"
              v-model="sellerIds"
              filterable
              remote
              reserve-keyword
              @change="selectSeller"
              placeholder="商家名称"
              :remote-method="remoteMethod"
              :loading="loading"
            >
              <el-option v-for="item in platformSeller" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-form>

        <el-collapse-transition>
          <div v-show="shaixuan">
            <el-form :model="dataForm" @keyup.enter.native="getDataList()" label-width="120px">
              <el-form-item label="会员信息"><el-input style="width:220px;" v-model="dataForm.key" placeholder="会员卡号/姓名/手机号/证件号" clearable></el-input></el-form-item>
              <el-form-item label="推荐员工">
                <el-input style="width:220px;" v-model="dataForm.salesman" placeholder="推荐员工" clearable></el-input>
              </el-form-item>
              <el-form-item label="会员来源">
                <el-radio-group v-model="dataForm.type">
                  <el-radio-button v-for="item in typeOp" :key="item.id" :label="item.value">{{ item.label }}</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="支付方式">
                <el-radio-group v-model="dataForm.payType">
                  <el-radio-button v-for="item in payOp" :key="item.id" :label="item.value">{{ item.label }}</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="充值状态">
                <el-radio-group v-model="dataForm.state">
                  <el-radio-button v-for="item in stateOp" :key="item.id" :label="item.value">{{ item.label }}</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="操作员">
                <el-select v-model="dataForm.executeUserId" filterable placeholder="请选择">
                  <el-option :label="'全部'" :value="null"></el-option>
                  <el-option v-for="item in executeUserIdOp" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button icon="el-icon-delete" @click="clearShaiXuan">清空筛选</el-button>
                <el-button type="primary" icon="el-icon-search" @click="getDataList()">{{ $t('Common.Query') }}</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-collapse-transition>

        <el-collapse-transition>
          <div>
            <!-- 数据报表 -->
            <el-row :gutter="12" class="memberreport" id="memberreport">
              <el-col :span="6" class="memberlistreport">
                <el-card shadow="hover" style="height: 198px;">
                  <div class="memberreporttitle center-footer-box">
                    累计撤销
                    <!-- <a href="javascript: void(0);" id="memberBirthdaytodate" class="details fr">详情</a> -->
                  </div>
                  <div class="center-box amountcolor6">
                    <span class="membernumber" id="bircount">{{ parseFloat(baobiaoshuju.cx_czMoney).toFixed(2) }}</span>
                    <span class="mumberunit">元</span>
                  </div>
                  <div class="center-footer-box">
                    <p class="paright">
                      累计赠送撤销
                      <i class="nembercolor" id="averageUser">{{ parseFloat(baobiaoshuju.cx_zsmoney).toFixed(2) }}</i>
                      元
                    </p>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6" class="memberlistreport">
                <el-card shadow="hover" style="height: 198px;">
                  <div class="memberreporttitle" id="">
                    <span class="fl">累计消费</span>
                    <!--                <span class="fr">
                      储值卡总额:
                      <i class="colorff" id="blanceamount">12723356.79</i>
                    </span> -->
                  </div>
                  <div class="center-box amountcolor6">
                    <span class="membernumber" id="usercount">{{ parseFloat(baobiaoshuju.xf_xfMoney).toFixed(2) }}</span>
                    <span class="mumberunit">元</span>
                  </div>
                  <!--                  <div class="center-footer-box">
                    <p class="paright">
                      今日新增
                      <i class="icon-angle-right"></i>
                      <i class="nembercolor" id="averageUser">{{ baobiaoshuju.AverageMemberNewCounts }}</i>
                      位会员
                    </p>
                  </div> -->
                </el-card>
              </el-col>
              <el-col :span="6" class="memberlistreport">
                <el-card shadow="hover" style="height: 198px;">
                  <div class="memberreporttitle">累计充值</div>
                  <div class="center-box amountcolor6">
                    <span class="membernumber" id="receivable_count">{{ parseFloat(baobiaoshuju.cz_czMoney).toFixed(2) }}</span>
                    <span class="mumberunit">元</span>
                  </div>
                  <div class="center-footer-box">
                    <p class="paright">
                      累计赠送
                      <i class="nembercolor" id="averageUser">{{ parseFloat(baobiaoshuju.cz_zsmoney).toFixed(2) }}</i>
                      元
                      <i class="icon-angle-right">储值余额总计</i>
                      <i class="nembercolor icon-angle-right" id="averageUser">{{ parseFloat(baobiaoshuju.cz_czMoney + baobiaoshuju.cz_zsmoney).toFixed(2) }}</i>
                      元
                    </p>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="6" class="memberlistreport">
                <el-card shadow="hover" style="height: 198px;">
                  <div class="memberreporttitle">充值会员(TOP3)</div>
                  <ul class="center-top-box" id="topList">
                    <li class="top-list" v-for="(item, index) in baobiaoshuju.top_list" :key="index" v-if="index < 3">
                      <div class="membertopname fl">
                        <i>{{ index + 1 }}.</i>
                        <span>{{ item.memberZSName }}</span>
                      </div>
                      <div class="membertopmoney fr">
                        <span class="money">{{ parseFloat(item.czMoney).toFixed(2) }}</span>
                        <i class="pad">元</i>
                      </div>
                    </li>
                    <p v-show="baobiaoshuju.top_list.length == 0" style="display: none;">暂无</p>
                  </ul>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-collapse-transition>

        <el-table :data="dataList" border="" id="dayin_table" v-loading="dataListLoading" @selection-change="selectionChangeHandle" style="width: 100%;">

          <el-table-column prop="sellerName" header-align="center" align="center" label="商家" width="180">
            <template slot-scope="scope">
              <span>{{ scope.row.sellerName ? scope.row.sellerName : '管理员' }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="outTradeNo" header-align="center" align="center" width="170" label="充值流水"></el-table-column>
          <!-- <el-table-column prop="memberName" header-align="center" align="center" label="用户" width="200" ></el-table-column> -->
          <el-table-column prop="memberZSName" header-align="center" align="center" label="姓名" width="120"></el-table-column>
          <el-table-column prop="memberTel" header-align="center" align="center" label="手机号" width="120"></el-table-column>

          <el-table-column prop="czMoney" header-align="center" align="center" label="充值金额">
            <template slot-scope="scope">
              <span v-if="scope.row.state == 4" style="color: red;">-{{ scope.row.czMoney }}</span>
              <span v-else style="color: green;">+{{ scope.row.czMoney }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="zsMoney" header-align="center" align="center" label="赠送金额">
            <template slot-scope="scope">
              <span v-if="scope.row.zsMoney > 0" style="color: green;">+{{ scope.row.zsMoney }}</span>
              <span v-else>无</span>
            </template>
          </el-table-column>
          <el-table-column prop="membercardNo" header-align="center" align="center" width="200" label="会员卡号"></el-table-column>
          <!-- <el-table-column prop="memberCertificateNo" header-align="center" align="center" width="250" label="证件号"></el-table-column> -->

          <el-table-column prop="time" header-align="center" align="center" label="充值日期" width="200">
            <template slot-scope="scope">
              <span>{{ moment(scope.row.time) }}</span>
            </template>
          </el-table-column>

          <el-table-column prop="payType" header-align="center" align="center" label="付款方式">
            <template slot-scope="scope">
              <span v-if="scope.row.payType === 1" size="small" type="danger">现金</span>
              <span v-if="scope.row.payType === 2" size="small" type="danger">微信</span>
              <span v-if="scope.row.payType === 3" size="small" type="danger">支付宝</span>
              <span v-if="scope.row.payType === 4" size="small" type="danger">银行卡</span>
              <span v-if="scope.row.payType === 5" size="small" type="danger">其他</span>
            </template>
          </el-table-column>

          <el-table-column prop="state" header-align="center" align="center" label="状态">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.state === 0" size="small" type="danger">未支付</el-tag>
              <el-tag v-if="scope.row.state === 1" size="small">已支付</el-tag>
              <el-tag v-if="scope.row.state === 3" size="small">已充值</el-tag>
              <el-tag v-if="scope.row.state === 4" size="small">已扣款</el-tag>
              <el-tag v-if="scope.row.state === 5" size="small" type="info">退款中</el-tag>
              <el-tag v-if="scope.row.state === 6" size="small">已退款</el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="type" header-align="center" align="center" label="来源">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.type === 1" size="small" type="danger">线上</el-tag>
              <el-tag v-else size="small">线下</el-tag>
            </template>
          </el-table-column>

        <el-table-column prop="salesman" header-align="center" align="center" label="推荐员工"></el-table-column>

          <el-table-column prop="note" header-align="center" align="center" label="备注">
            <template slot-scope="scope">
              <el-popover placement="top-start" width="150" trigger="hover" :content="scope.row.note ? scope.row.note : '暂无'">
                <el-button size="small" icon="el-icon-info" slot="reference"></el-button>
              </el-popover>
            </template>
          </el-table-column>

          <el-table-column fixed="right" header-align="center" align="center" width="100" label="操作" v-if="isAuth('hotel:hotelrecharge:revoke')">
            <template slot-scope="scope">
              <!-- <el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>-->
              <el-button type="text" size="small" v-if="scope.row.state != 0 && scope.row.revokeState == 1" @click="revoke(scope.row.id)">撤销</el-button>
              <el-button type="text" size="small" v-if="scope.row.revokeState == 2" style="color: #E4E7ED;">已撤销</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div style="float: left;margin-top: 20px;">
          <span>充值合计：</span>
          <span style="margin-right: 18px;">{{ parseFloat(pageCountMoney).toFixed(2) }}元</span>
          <span>赠送合计：</span>
          <span style="margin-right: 18px;">{{ parseFloat(pageCountkfMoney).toFixed(2) }}元</span>
        </div>

        <iframe id="print-iframe" style="display: none;"></iframe>

        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>
        <!-- 弹窗, 新增 / 修改 -->
        <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getLodop } from '../../../../../utils/lodop.js'; //引入lodopFuncs 插件
import moment from 'moment';
export default {
  data() {
    return {
      loading: false,
      chongzhiLoading: false,
      typeOp: [
        {
          label: '全部',
          value: null
        },
        {
          label: '线上',
          value: 1
        },
        {
          label: '线下',
          value: 2
        }
      ],
      // 1未付款,2已付款，3充值，4扣款，5撤销
      stateOp: [
        {
          label: '全部',
          value: null
        },
        {
          label: '未付款',
          value: 0
        },
        {
          label: '已付款',
          value: 1
        },
        {
          label: '充值',
          value: 3
        },
        {
          label: '扣款',
          value: 4
        },
        {
          label: '退款中',
          value: 5
        },
        {
          label: '已退款',
          value: 6
        }
      ],
      // 支付方式（1现金2微信支付3支付宝支付4银行卡5其他）
      payOp: [
        {
          label: '全部',
          value: null
        },
        {
          label: '现金',
          value: 1
        },
        {
          label: '微信',
          value: 2
        },
        {
          label: '支付宝',
          value: 3
        },
        {
          label: '银行卡',
          value: 4
        },
        {
          label: '其他',
          value: 5
        }
      ],
      executeUserIdOp: [],
      dataForm: {
        key: '',
        startDate: '',
        endDate: '',
        type: null,
        payType: null,
        state: null,
        selDateAdd: '今日',
        executeUserId: null,
        salesman: '',
        viewRevoke: false
      },
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      shaixuan: false,
      baobiaoshuju: {
        //撤销金额
        cx_czMoney: 0,
        //撤销赠送金额
        cx_zsmoney: 0,
        //累计充值金额
        cz_czMoney: 0,
        //累计赠送金额
        cz_zsmoney: 0,
        //累计消费金额
        xf_xfMoney: 0.0,
        //今日已消费会员数
        TodayMemberConsumption: 0,
        //今日消费金额
        TodayConsumptionMoney: 0.0,
        //(TOP3)
        top_list: []
      },
      sellerIds: [],
      platformSeller: [],
      tableHeader: [
        { name: '商家名称', field: 'sellerName' },
        { name: '充值流水', field: 'outTradeNo' },
        { name: '姓名', field: 'memberZSName' },
        { name: '手机号', field: 'memberTel' },
        { name: '金额', field: 'czMoney' },
        { name: '赠送金额', field: 'zsMoney' },
        { name: '会员卡号', field: 'membercardNo' },
        { name: '充值日期', field: 'time' },
        { name: '付款方式', field: 'payType' },
        { name: '状态', field: 'state' },
        { name: '来源', field: 'type' },
        { name: '备注', field: 'note' }
      ],
      pageCountMoney: 0,
      pageCountkfMoney: 0,
      pageCounttkMoney: 0,
      pageCountytMoney: 0,
      pageCountzsMoney: 0
    };
  },
  components: {},
  activated() {
    this.getDataList();
    this.remoteMethod();
    this.getExecuteUserId();
  },
  methods: {
    //清空筛选
    clearShaiXuan(){
      Object.assign(this.dataForm, this.$options.data().dataForm)
      this.getDataList();
    },
    dayin2() {
      var style = [
        '<style>',
        'body{font-size: 12px; color: #666;}',
        'table{width: 100%; border-collapse: collapse; border-spacing: 0;}',
        'th,td{line-height: 20px; padding: 9px 15px; border: 1px solid #ccc; text-align: left; font-size: 12px; color: #666;}',
        'a{color: #666; text-decoration:none;}',
        '*.layui-hide{display: none}',
        '</style>'
      ].join('');
      //标题
      // var title='<div>充值明细</div>'

      //头部html
      var table = '<table cellspacing="0" cellpadding="0" border="0" class="el-table__header" style="width:100%;"><thead class="has-gutter"><tr class="">';
      table += '<th style="text-align:center;line-height:38px;font-size:20px;font-weight:bold;" colspan="12" >充值明细</th>';

      table += '</tr><tr class="">';
      this.tableHeader.forEach((item, index) => {
        table += '<th colspan="1" rowspan="1" class="el-table_1_column_2  is-center is-leaf"><div class="cell">' + item.name + '</div></th>';
      });
      table += '</tr></thead><tbody>';
      //身体
      this.dataList.forEach((item, index) => {
        table += '<tr class=""><td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' + '<span>' + item.sellerName + '</span></div>' + '</td>';
        table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' + '<span>' + item.outTradeNo + '</span></div>' + '</td>';
        table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' + '<span>' + item.memberZSName + '</span></div>' + '</td>';
        table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' + '<span>' + item.memberTel + '</span></div>' + '</td>';
        table +=
          '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' +
          '<div class="cell">' +
          '<span>' +
          this.czMoneyInt(item.state) +
          item.czMoney +
          '</span></div>' +
          '</td>';
        table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' + '<span>' + item.zsMoney + '</span></div>' + '</td>';
        table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' + '<span>' + item.membercardNo + '</span></div>' + '</td>';
        table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' + '<span>' + this.moment(item.time) + '</span></div>' + '</td>';
        table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' + '<span>' + this.payType(item.payType) + '</span></div>' + '</td>';
        table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' + '<span>' + this.stateInt(item.state) + '</span></div>' + '</td>';
        table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' + '<span>' + this.type(item.type) + '</span></div>' + '</td>';
        table += '<td rowspan="1" colspan="1" class="el-table_1_column_2 is-center ">' + '<div class="cell">' + '<span>' + item.note + '</span></div>' + '</td>';
        table += '</tr>';
        console.log(item);
      });

      table += '</tbody></table>';
      table +=
        '<div style="width: 100%;text-align: right;">' +
        '<span style="margin-right: 20px;">打印时间：' +
        this.moment(new Date()) +
        '</span>' +
        '<span>打印人：' +
        this.$store.state.user.name +
        '</span>' +
        '</div>';

      var iframe = document.getElementById('print-iframe');
      var doc = null;
      document.body.appendChild(iframe);
      doc = iframe.contentWindow.document;
      doc.write(style + table);
      doc.close();
      iframe.contentWindow.focus();
      iframe.contentWindow.print();
      if (navigator.userAgent.indexOf('MSIE') > 0) {
        document.body.removeChild(iframe);
      }
    },
    czMoneyInt(state) {
      if (state == 4) {
        return '-';
      }
      return '+';
    },

    //状态
    stateInt(state) {
      switch (state) {
        case 0:
          return '未付款';
        case 1:
          return '已付款';
        case 3:
          return '充值';
        case 4:
          return '扣款';
        case 5:
          return '正在退款';
        case 6:
          return '已退款';
      }
      return 'null';
    },
    type(type) {
      //类型（1线上充值2线下充值）
      switch (type) {
        case 1:
          return '线上充值';
        case 2:
          return '线下充值';
      }
      return 'null';
    },
    payType(payType) {
      //支付方式（1现金2微信支付3支付宝支付4银行卡5其他）
      switch (payType) {
        case 1:
          return '现金';
        case 2:
          return '微信';
        case 3:
          return '支付宝';
        case 4:
          return '银行卡';
        case 5:
          return '其他';
      }
      return 'null';
    },
    //exportBtn导出
    exportBtn() {
      window.open(this.$http.adornUrl(`/hotel/hotelrecharge/excel_export`));
    },
    selectSeller(id, value) {
      this.getDataList();
      this.getExecuteUserId();
    },
    //加载操作员
    getExecuteUserId() {
      var ids = '';
      if (this.sellerIds) {
        this.sellerIds.forEach((item, index) => {
          ids += item + ',';
        });
        ids = ids.substring(0, ids.length - 1);
      }
      this.$http({
        url: this.$http.adornUrl('/hotel/hotelselleremployee/executeList'),
        method: 'get',
        params: this.$http.adornParams({
          ids: ids
        })
      }).then(({ data }) => {
        this.loading = false;
        if (data && data.code === 0) {
          this.executeUserIdOp = data.page.list;
        } else {
          this.$message.error(data.msg);
        }
      });
    },
    //加载平台商家数据
    remoteMethod(query) {
      if(this.isAuth('hotel:hotelseller:list')){
        this.loading = true;
        this.$http({
          url: this.$http.adornUrl("/hotel/hotelseller/platformSeller"),
          method: "get",
          params: this.$http.adornParams({
            sellerName: query
          })
        }).then(({ data }) => {
          this.loading = false;
          if (data && data.code === 0) {
            this.platformSeller = data.page.list;
          } else {
            this.$message.error(data.msg);
          }
        });
      }
    },
    moment(date) {
      return moment(date).format('YYYY-MM-DD HH:mm:ss');
    },
    //获取报表数据
    getreportForm() {
      this.dataListLoading = true;
      var ids = '';
      if (this.sellerIds) {
        this.sellerIds.forEach((item, index) => {
          ids += item + ',';
        });
        ids = ids.substring(0, ids.length - 1);
      }
      this.$http({
        url: this.$http.adornUrl('/hotel/hotelrecharge/reportForm'),
        method: 'get',
        params: this.$http.adornParams({
          ...this.dataForm,
          ids: ids
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.baobiaoshuju.cx_czMoney = data.data.cx_map.czMoney;
          this.baobiaoshuju.cx_zsmoney = data.data.cx_map.zsMoney;
          this.baobiaoshuju.cz_czMoney = data.data.cz_map.czMoney;
          this.baobiaoshuju.cz_zsmoney = data.data.cz_map.zsMoney;
          this.baobiaoshuju.xf_xfMoney = data.data.xf_map.xfMoney;
          this.baobiaoshuju.top_list = data.data.top_list;
        } else {
        }
        this.dataListLoading = false;
      });
    },
    // 获取数据列表
    getDataList() {
      this.getreportForm();
      this.dataListLoading = true;
      var ids = '';
      if (this.sellerIds) {
        this.sellerIds.forEach((item, index) => {
          ids += item + ',';
        });
        ids = ids.substring(0, ids.length - 1);
      }
      this.$http({
        url: this.$http.adornUrl('/hotel/hotelrecharge/list'),
        method: 'get',
        params: this.$http.adornParams({
          page: this.pageIndex,
          limit: this.pageSize,
          ...this.dataForm,
          ids: ids
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page.records;
          this.totalPage = data.page.total;
          this.pageCountMoney = 0;
          this.pageCountzsMoney = 0;
          this.pageCounttkMoney = 0;
          this.pageCountkfMoney = 0;
          this.pageCountytMoney = 0;
          this.dataList.forEach((item, index) => {
            if (item.state === 2 || item.state === 3) {
              this.pageCountMoney += item.czMoney;
              this.pageCountkfMoney += item.zsMoney;
            }
            if (item.state === 4) {
              this.pageCountMoney = this.pageCountMoney - item.czMoney;
            }
          });
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
        this.dataListLoading = false;
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    // 多选
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    },
    // 删除
    revoke(id) {
      this.$confirm(`确定进行撤销操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl(`/hotel/hotelrecharge/revoke/${id}`),
          method: 'get',
          params: this.$http.adornParams()
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: this.$t('Common.OperationSuccessful'),
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getDataList();
              }
            });
          } else {
            this.$message.error(data.msg);
          }
        });
      });
    }
  }
};
</script>

<style>
.memberreport {
  margin-bottom: 18px;
}
.memberreport .memberlistreport .memberreportsmbox {
  padding-left: 20px;
}
.memberreport .memberlistreport .center-footer-box {
  height: 36px;
  line-height: 30px;
  font-size: 12px;
  position: relative;
}
.memberreport .memberlistreport .memberreporttitle {
  padding-top: 3px;
  height: 30px;
  line-height: 30px;
  padding-right: 8px;
}
.memberreport .memberlistreport .center-footer-box .details {
  display: block;
  width: 38px;
  height: 20px;
  line-height: 19px;
  background-color: #07c9de;
  font-size: 12px;
  text-align: center;
  color: #fff;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  position: absolute;
  right: 20px;
  top: 5px;
  transition: 0.35s;
}
.fr {
  float: right;
}
a {
  text-decoration: none;
}
.memberreport .memberlistreport .center-box {
  height: 90px;
  width: 100%;
  text-align: center;
  line-height: 90px;
  position: relative;
}
.amountcolor6 {
  color: #ff5400;
}
.memberreport .memberlistreport .membernumber {
  font-size: 34px;
}
.memberreport .memberlistreport .mumberunit {
  font-size: 18px;
}
.memberreport .memberlistreport .center-footer-box {
  height: 36px;
  line-height: 30px;
  font-size: 12px;
  position: relative;
}
.memberreport .memberlistreport .center-footer-box p {
  margin: 0;
  padding-right: 75px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.memberreport .memberlistreport .center-footer-box .nembercolor {
  color: #ff5400;
  padding-left: 3px;
  padding-right: 3px;
}
.memberreport .memberlistreport .center-footer-box .details {
  display: block;
  width: 38px;
  height: 20px;
  line-height: 19px;
  background-color: #07c9de;
  font-size: 12px;
  text-align: center;
  color: #fff;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  position: absolute;
  right: 20px;
  top: 5px;
  transition: 0.35s;
}
.memberreport .memberlistreport .memberreporttitle {
  padding-top: 3px;
  height: 30px;
  line-height: 30px;
  padding-right: 8px;
}
.fl {
  float: left;
}
.colorff {
  color: #f00;
}
.memberreport .memberlistreport .center-box {
  height: 90px;
  width: 100%;
  text-align: center;
  line-height: 90px;
  position: relative;
}
.memberreport .memberlistreport .center-footer-box {
  height: 36px;
  line-height: 30px;
  font-size: 12px;
  position: relative;
}
.memberreport .memberlistreport .center-footer-box .paright {
  padding-right: 0;
}

.memberreport .memberlistreport .center-footer-box p {
  margin: 0;
  padding-right: 75px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.memberreport .memberlistreport .center-footer-box .nembercolor {
  color: #ff5400;
  padding-left: 3px;
  padding-right: 3px;
}
.memberreport .memberlistreport .memberreporttitle {
  padding-top: 3px;
  height: 30px;
  line-height: 30px;
  padding-right: 8px;
}
.memberreport .memberlistreport .center-box {
  height: 90px;
  width: 100%;
  text-align: center;
  line-height: 90px;
  position: relative;
}
.memberreport .memberlistreport .center-top-box {
  height: 90px;
  width: 100%;
}
.memberreport .memberlistreport .center-top-box li {
  width: 100%;
  height: 30px;
  overflow: hidden;
  margin: 0;
}
.memberreport .memberlistreport .top-list {
  height: 30px;
  line-height: 30px;
}
.memberreport .memberlistreport .membertopname {
  display: block;
}
.memberreport .memberlistreport .center-top-box li .membertopmoney {
  height: 30px;
}
.memberreport .memberlistreport .center-top-box li .money {
  font-size: 20px;
  color: #ff5400;
}
</style>
